<!-- 
* @desc:分槽管理表格页面组件
* @fileName:TaskDetailsTable.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-05-27
!-->
<script lang="ts" setup>
import { reactive, ref } from "vue";
const data = reactive({
  tableData: [
    {
      id: 1,
      taskName: "数据清洗",
      type: "转换",
      beginTime: "2022-05-20 23:33",
      endTime: "2022-05-22 09:15",
      estimatedHour: "2小时",
      actualConsumption: "30分钟",
      status: "运行中",
      logLevel: "基本(Basic)",
    },
  ],
  isWorkDiadlogShow: false,
  isLogDialogShow: false,
});
const editdirection = ref("rtl");

const viewWorkflow = (itemData: any) => {
  data.isWorkDiadlogShow = true;
};

const viewLogDetails = (itemData: any) => {
  data.isLogDialogShow = true;
};
</script>

<template>
  <div class="page-details">
    <el-table :data="data.tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="taskName" label="任务名称" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="beginTime" label="开始时间" />
      <el-table-column prop="endTime" label="预计结束时间" />
      <el-table-column prop="estimatedHour" label="预计耗时" />
      <el-table-column prop="actualConsumption" label="实际耗时" />
      <el-table-column prop="status" label="状态" />
      <el-table-column prop="logLevel" label="日志等级" />
      <el-table-column label="日志详情" width="100px">
        <template #default="scope">
          <span class="operation">
            <lanius-tooltip content="日志详情">
              <img
                @click="viewLogDetails(scope.row)"
                class="run"
                src="@/assets/img/slot-manage/operation.png" /></lanius-tooltip
          ></span>
        </template>
      </el-table-column>
      <el-table-column label="工作流程" width="100px">
        <template #default="scope">
          <span class="operation">
            <lanius-tooltip content="工作流程">
              <img
                @click="viewWorkflow(scope.row)"
                class="run"
                src="@/assets/img/slot-manage/operation.png" /></lanius-tooltip
          ></span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 数据为空显示 -->
    <div v-if="false" slot="empty">
      <el-empty description="暂无数据" />
    </div>
  </div>

  <!-- 工作流程弹窗 -->
  <el-dialog
    v-model="data.isWorkDiadlogShow"
    v-if="data.isWorkDiadlogShow"
    title="工作流程"
    :width="740"
    :direction="editdirection"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <!-- 工作流程弹窗内容 -->
  </el-dialog>

  <!-- 日志详情弹窗 -->
  <el-dialog
    v-model="data.isLogDialogShow"
    v-if="data.isLogDialogShow"
    title="日志详情"
    :width="740"
    :direction="editdirection"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <!-- 日志详情弹窗内容 -->
    <div class="log">
      <div class="logContent">
        日志级别 <span>基本（Basic）</span>
      </div>
      <div class="logImg">
        <ul
          infinite-scroll-immediate="false"
          class="infinite-list"
        >
          <li
            class="infinite-list-item"
          >
            日志内容
          </li>
        </ul>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.page-details {
  margin: 0 15px;
}
.el-table {
  :deep(th) {
    background-color: #fafafa;
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 40px;
    }
  }
  :deep(td) {
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 40px;
    }
  }
  :deep(.el-table__row--striped) {
    td {
      background-color: rgba($color: #f6f6f6, $alpha: 0.56) !important;
    }
  }
  :deep(.el-table__inner-wrapper) {
    &::before {
      height: 0;
    }
  }
}
.operation {
  padding: 0 5px;
  img {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #0003;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
}
.log {
  width: 100%;
  .logContent {
    padding-left: 15px;
    width: 700px;
    height: 60px;
    line-height: 60px;
    font-family: PingFang SC;
    color: #000000;
    overflow: hidden;
    // padding-left: 15px;
    font-size: 14px;
    margin-bottom: 10px;
    background-color: #f6f6f6;
    span {
      font-family: PingFang SC;
      font-weight: 700;
      color: #5473e6;
      margin-left: 20px;
      font-size: 18px;
    }
  }
  .logImg {
    width: 700px;
    height: 580px;
    overflow-x: hidden;
    // margin-top: 10px;
    background-color: #f6f6f6;
    .infinite-list {
      // height: 550px;
      padding: 15px;
      margin: 0;
      list-style: none;
    }
    .infinite-list .infinite-list-item {
      display: flex;
      align-items: center;
    }
    .infinite-list .infinite-list-item + .list-item {
      margin-top: 15px;
    }
  }
}
</style>
